<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <button class="btn left" @click="goBack">取消</button>
    <h2 class="title">个人信息</h2>
    <button class="btn" @click="sure">{{edit?'保存':'编辑'}}</button>
  </header>
  <div class="page">
    <div class="form-wrap mb30">
    <!--
      <div class="displayflex form-item img-wrap" v-if="!edit">
        <div class="label">头像</div>
        <div class="flex1 ctx">
          <div class="txt-rit" v-if="userinfo.PictContent"><img :src="userinfo.PictContent | filterImgUrl"></div>
          <div class="txt-rit" v-else><img src="~images/icon/people-ico.png"></div>
        </div>
      </div>
      -->
      <div class="displayflex form-item">
        <div class="label">姓名</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="cpyName" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{cpyName}}</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">手机号</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="cpyTel" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{cpyTel}}</div>
        </div>
      </div>
      <div class="displayflex form-item" v-if="usertype=='Driver'">
        <div class="label">身份证</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="IDCode" v-if="edit">
          <div class="txt-rit" v-if="!edit">{{IDCode}}</div>
        </div>
      </div>
      <template v-if="ownerTypes.indexOf(usertype) > -1">
        <div class="txt-rit" id="addressChinese" style="display:none">{{addressValue[0] | province}}/{{addressValue[1] | city}}/{{addressValue[2] | district}}</div>
        <div class="displayflex form-item" v-if="usertype == 'Cargowner'">
          <div class="label">企业名称</div>
          <div class="flex1 ctx">
            <input type="text" class="txt-rit" v-model="CWcpyName" v-if="edit">
            <div class="txt-rit" v-if="!edit">{{CWcpyName}}</div>
          </div>
        </div>
        <div class="displayflex form-item" v-if="usertype == 'Cargowner'">
          <div class="label">名称缩写</div>
          <div class="flex1 ctx">
            <input type="text" class="txt-rit" v-model="CWcpyAbbr" v-if="edit">
            <div class="txt-rit" v-if="!edit">{{CWcpyAbbr}}</div>
          </div>
        </div>
      <div class="displayflex form-item" v-if="edit">
        <x-address class="address-wrap" title="省市区" v-model="addressValue" :list="addressData" placeholder="请选择" value-text-align="right">
        </x-address>
        <i class="iconfont icon-right"></i>
      </div>
      <div class="displayflex form-item" v-if="!edit">
        <div class="label">省市区</div>
        <div class="flex1 ctx">
          <div class="txt-rit">{{addressValue[0] | province}}{{addressValue[1] | city}}{{addressValue[2] | district}}</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">详细地址</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="cpyAddress" v-if="edit">
          <div class="txt-rit" v-else>{{cpyAddress}}</div>
        </div>
      </div>
      </template>
    </div>
    <div v-if="usertype=='Driver'">
      <p class="form-tip ft14">银行卡（只能绑定本人银行卡）</p>
      <div class="form-wrap mb30">
        <div class="displayflex form-item">
          <div class="label">银行</div>
          <div class="flex1 ctx">
            <input type="text" class="txt-rit" v-model="BankName" v-if="edit">
            <div class="txt-rit" v-if="!edit">{{BankName}}</div>
          </div>
        </div>
        <div class="displayflex form-item">
          <div class="label">卡号</div>
          <div class="flex1 ctx">
            <input type="tel" class="txt-rit" v-model="BankCardNo" v-if="edit">
            <div class="txt-rit" v-if="!edit">{{BankCardNo}}</div>
          </div>
        </div>
      </div>
    </div>
    <template>
      <uploader-img :word="'头像'" :max="1" v-model="picJsonTX" :list="picJsonTX" :editflag="edit"></uploader-img>
      <uploader-img :word="'营业执照'" :max="1" v-if="usertype=='Cargowner'" v-model="picJsonYY" :list="picJsonYY" :editflag="edit"></uploader-img>
      <uploader-img :word="'行驶证'" :max="1" v-if="usertype=='Driver'" v-model="picJsonXS" :list="picJsonXS" :editflag="edit"></uploader-img>
      <uploader-img :word="'驾驶证'" :max="1" v-if="usertype=='Driver'" v-model="picJsonJS" :list="picJsonJS" :editflag="edit"></uploader-img>
      <!-- <div class="btn-bottom">
        <button class="btn btn-default btn-click">提 交</button>
      </div> -->
    </template>
  </div>
  <div class="btn-bottom"><div class="btn" @click="sure">{{edit?'保存':'编辑'}}</div></div>
</div>
</template>
<script>
import uploaderImg from '@/components/share/uploader.vue';
export default {
  components:{
    uploaderImg,
  },
  data(){
    return {
      cpyName:'',
      cpyTel:'',
      CWcpyName:'',
      CWcpyAbbr:'',
      cpyAddress:'',
      addressData: this.ChinaAddressV3Data,
      addressValue:[],
      edit:false,//是否编辑
      usertype:'',//用户类型
      IDCode:'',
      picJsonTX:{
        imgLista: [],
        imgListBase: []
      },
      picJsonYY:{
        imgLista: [],
        imgListBase: []
      },
      picJsonXS:{
        imgLista: [],
        imgListBase: []
      },
      picJsonJS:{
        imgLista: [],
        imgListBase: []
      },
      showLoad:false,
      BankName:'',
      BankCardNo:'',
      ownerTypes:['Cargowner','Cargoreceiver','warehouse'],
    }
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
  },
  created(){
    this.getdata();
  },
  methods:{
    getdata(){
      var _this = this;
      if(this.userinfo){
        this.usertype = this.userinfo.UserBizType;
        this.cpyName = this.userinfo.Name || this.userinfo.LogonUser;
        this.cpyTel = this.userinfo.MobileNo;
        this.CWcpyName = this.userinfo.ChineseName,
        this.CWcpyAbbr = this.userinfo.Abbreviation,
        this.addressValue.push(this.userinfo.Province);
        this.addressValue.push(this.userinfo.City);
        this.addressValue.push(this.userinfo.District);
        this.cpyAddress = this.userinfo.Address;
        this.IDCode = this.userinfo.IDCode;
        this.BankName = this.userinfo.BankName;
        this.BankCardNo = this.userinfo.BankCardNo;

        this.picJsonTX.imgLista = JSON.parse(_this.userinfo.PictContent) == null ? []:JSON.parse(_this.userinfo.PictContent);
        this.picJsonYY.imgLista = JSON.parse(_this.userinfo.CargownerLic) == null ? []:JSON.parse(_this.userinfo.CargownerLic);
        this.picJsonJS.imgLista = JSON.parse(_this.userinfo.DLFrontPictContent) == null ? []:JSON.parse(_this.userinfo.DLFrontPictContent);
        this.picJsonXS.imgLista = JSON.parse(_this.userinfo.DLBackPictContent) == null ? []:JSON.parse(_this.userinfo.DLBackPictContent);
      };
    },
    filterImgUrl(val){
      if (val != null && val != "null" && val && val != '[]') {
          val = JSON.parse(val);
          if (val.length == 1) {
              return "https://image.csyaoly.com" + val;
          } else {
              return "https://image.csyaoly.com" + val[0];
          };
      }
    },
    goBack(){
      this.$router.go(-1)
    },
    sure(){
      if(this.usertype=='Driver' && this.edit){
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
        if(!reg.test(this.IDCode) && this.IDCode){
          this.$vux.toast.show({
            type:'warn',//success, warn, cancel, text
            text: "请输入合法身份证"
          });
          return false; 
        }
      };
      this.edit = !this.edit;
      if(this.edit){
        return false;
      };
      this.showLoad = true;
      var _this = this;

      var query = {
          StaffID: _this.userinfo.StaffID,
          Name: _this.cpyName,
          MobileNo: _this.cpyTel,
          ChineseName:_this.CWcpyName,
          Abbreviation:_this.CWcpyAbbr,
          AreaFullText:document.getElementById('addressChinese')==null?"":document.getElementById('addressChinese').innerHTML,
          Province: _this.addressValue[0],
          City: _this.addressValue[1],
          District: _this.addressValue[2],
          Address: _this.cpyAddress,
          IDCode: _this.IDCode,
          BankName: _this.BankName,
          BankCardNo: _this.BankCardNo,

          imgUrla: _this.picJsonTX.imgListBase,
          CargownerLic: _this.picJsonYY.imgListBase,
          B64_DLFrontPictContent: _this.picJsonJS.imgListBase,
          B64_PSFrontPictContent: _this.picJsonXS.imgListBase,

          TenantGuid: _this.userinfo.TenantGuid,
          LoginedStaffID: _this.userinfo.StaffID,
          LoginedName: _this.userinfo.Name,
          UserBizType: _this.usertype,
        };
      this.Ajax.post("UserUpdateInfo", query).then(function(resp) {
        if(resp.IsSuccess){
          _this.clear();
        } else {
          _this.$vux.toast.show({
            type:'text',//success, warn, cancel, text
            text: resp.ErrorMessage,
          });
        }
        _this.showLoad = false;
      });
    },
    clear(){
      var _this = this,
          userinfo = JSON.parse(localStorage.UserInfo),
          query = {
            LogonUser:userinfo.LogonUser,
            Pwd:userinfo.Pwd,
            reLogin: 'Y',
          };
      //清除
      sessionStorage.clear();
      localStorage.clear();
      //重加载
      this.Ajax.post('UserLogin', query).then(function(resp) {
        if (resp.IsSuccess) {
          localStorage.UserInfo = JSON.stringify(resp.Data);
          localStorage.Automatic = resp.Data.Pwd;
          _this.$vux.toast.show({
            type:'text',//success, warn, cancel, text
            text: '资料保存完成',
          });
        } else {
          _this.$vux.toast.show({
            type:'warn',//success, warn, cancel, text
            text: "缓存操作失败，请重新登录",
            onHide(){
              _this.$router.push({
                path:'/login'
              });
            }
          });
        };
        _this.showLoad = false;
      });
    }
  }
}
</script>